<!-- 人工质检 -->
<template>
	<div id="ManualCheck">
		<a-card>
			<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
				<a-row :gutter="24">
					<a-col :span="6">
						<a-form-item label="主叫号码" name="caller">
							<a-input v-model:value="searchFormState.caller" placeholder="请输入主叫号码" enter-button allowClear />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="被叫号码" name="callee">
							<a-input v-model:value="searchFormState.callee" placeholder="请输入被叫号码" enter-button allowClear />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="坐席账号" name="userName">
							<a-input v-model:value="searchFormState.userName" placeholder="请输入坐席账号" enter-button allowClear />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="呼叫序列号" name="callId">
							<a-input v-model:value="searchFormState.callId" placeholder="请输入呼叫序列号" enter-button allowClear />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="6">
						<a-form-item label="质检员" name="qcInspector">
							<a-input v-model:value="searchFormState.qcInspector" placeholder="请输入质检员" enter-button allowClear />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="质检结果" name="inspection">
							<a-select v-model:value="searchFormState.inspection" placeholder="请选择质检结果">
								<a-select-option v-for="item in manualCheck" :key="item.value" :value="item.value">{{
									item.label
								}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="所属公司" name="deptId">
							<a-tree-select
								v-model:value="searchFormState.deptId"
								class="xn-wd"
								:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
								placeholder="请选择组织"
								allow-clear
								tree-default-expand-all
								:tree-data="treeData"
								:tree-default-expanded-keys="treeDefaultExpandedKeys"
								:field-names="{
									children: 'children',
									label: 'name',
									value: 'id'
								}"
							></a-tree-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="回传时间">
							<a-range-picker v-model:value="createTimeArr" valueFormat="YYYY-MM-DD" :allow-clear="false" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="24">
					<a-col :span="6">
						<a-button type="primary" @click="searchList">查询</a-button>
						<a-button style="margin: 0 8px" @click="reset">重置</a-button>
					</a-col>
				</a-row>
			</a-form>
		</a-card>
		<a-card>
			<a-row :gutter="24">
				<a-col :span="2">
					<a-button type="primary" @click="toExport">导出</a-button>
				</a-col>
			</a-row>
			<s-table ref="tableRef" :columns="columns" :data="loadData" :scroll="{ x: 'max-content' }">
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'inspection'">
						{{ calcInspection(record.inspection) }}
					</template>
					<template v-if="column.dataIndex === 'action'">
						<a-space>
							<a-button type="link" size="small" @click="toDetails(record)">详情</a-button>
							<!-- <a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record.id)">
								<a-button type="link" danger size="small">删除 </a-button>
							</a-popconfirm> -->
						</a-space>
					</template>
				</template>
			</s-table>
		</a-card>
		<CheckDetails ref="checkDetailsRef" />
	</div>
</template>
<script setup name="ManualCheck">
	import manualCheckApi from '@/api/qc/manualCheck/manualCheckApi'
	import bizUserApi from '@/api/biz/bizUserApi'
	import downloadUtil from '@/utils/downloadUtil'
	import dayjs from 'dayjs'
	import tool from '@/utils/tool'
	import { ref } from 'vue'
	import CheckDetails from '@/views/qc/manualCheck/checkDetails.vue'
	// ===========================================DATA======================================================
	const manualCheck = tool.dictList('ManualCheck')
	const createTimeArr = ref([
		dayjs().format('YYYY-MM-DD'),
		dayjs().format('YYYY-MM-DD') // 今天的日期
	])
	let checkDetailsRef = ref()
	const treeData = ref([])
	const treeDefaultExpandedKeys = ref([])
	const searchFormRef = ref()
	const searchFormState = ref({
		current: 1,
		size: 10,
		caller: null,
		callee: null,
		userName: null,
		beginTime: dayjs().format('YYYY-MM-DD').concat(' 00:00:00'),
		endTime: dayjs().format('YYYY-MM-DD').concat(' 23:59:59'),
		callId: null,
		deptId: null,
		inspection: null,
		qcInspector: null
	})
	const tableRef = ref()
	const columns = [
		{
			title: '呼叫序列号',
			dataIndex: 'callId'
		},
		{
			title: '坐席',
			dataIndex: 'agentNum'
		},
		{
			title: '坐席账号',
			dataIndex: 'userName'
		},

		{
			title: '主叫',
			dataIndex: 'caller'
		},

		{
			title: '被叫',
			dataIndex: 'callee'
		},

		{
			title: '所属公司',
			dataIndex: 'companyName'
		},
		{
			title: '质检员',
			dataIndex: 'qcInspector'
		},
		{
			title: '质检结果',
			dataIndex: 'inspection'
		},
		{
			title: '质检备注',
			dataIndex: 'remark'
		},
		{
			title: '操作',
			dataIndex: 'action',
			fixed: 'right',
			align: 'center'
		}
	]
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		bizUserApi.userOrgTreeSelector().then((res) => {
			if (res !== null) {
				treeData.value = res
				// 默认展开2级
				treeData.value.forEach((item) => {
					// 因为0的顶级
					if (item.parentId === '0') {
						treeDefaultExpandedKeys.value.push(item.id)
						// 取到下级ID
						if (item.children) {
							item.children.forEach((items) => {
								treeDefaultExpandedKeys.value.push(items.id)
							})
						}
					}
				})
			}
		})
	})
	// ===========================================METHODS==================================================
	const calcInspection = (inspection) => {
		return manualCheck.find((item) => item.value === inspection)?.label
	}
	const searchList = () => {
		tableRef.value.refresh(true)
	}
	const reset = () => {
		searchFormRef.value.resetFields()
		createTimeArr.value = [
			dayjs().format('YYYY-MM-DD'),
			dayjs().format('YYYY-MM-DD') // 今天的日期
		]
		searchList()
	}
	const toDetails = (record) => {
		checkDetailsRef.value.onOpen(record)
	}
	// ===========================================REQUEST==================================================
	const loadData = (parameter) => {
		searchFormState.value.current = parameter.current
		searchFormState.value.size = parameter.size
		searchFormState.value.beginTime = createTimeArr.value[0].concat(' 00:00:00')
		searchFormState.value.endTime = createTimeArr.value[1].concat(' 23:59:59')
		return manualCheckApi.pageList(searchFormState.value).then((res) => {
			return res
		})
	}
	//删除
	const deleteRecord = (id) => {
		manualCheckApi.del(id).then((res) => {
			tableRef.value.refresh(true)
		})
	}
	//导出
	const toExport = () => {
		manualCheckApi.export(searchFormState.value).then((res) => {
			downloadUtil.resultDownload(res)
		})
	}
</script>
<style lang="less" scoped>
	:deep(.ant-picker-range) {
		width: 100%;
	}
</style>
